<template>
    <div class="login-wrap">
        <div class="ms-login">
            <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
                <el-tab-pane label="机构申请" name="first">
                    <el-form
                        :model="ruleForm"
                        status-icon
                        :rules="rules"
                        ref="ruleForm"
                        label-width="100px"
                        class="demo-ruleForm"
                    >
                        <el-form-item label="机构名称" prop="title">
                            <el-input v-model.number="ruleForm.title"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人姓名" prop="pname">
                            <el-input v-model.number="ruleForm.pname"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人电话" prop="phone">
                            <el-input v-model="ruleForm.phone" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="机构网站" prop="website">
                            <el-input v-model="ruleForm.website" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="行业类型" prop="itype">
                            <el-input v-model.number="ruleForm.itype"></el-input>
                        </el-form-item>
                        <el-form-item label="经营项目" prop="item">
                            <el-input v-model="ruleForm.item" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="注册资金" prop="fund">
                            <el-input v-model="ruleForm.fund" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="账号" prop="age">
                            <el-input v-model.number="ruleForm.age"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="pass">
                            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkPass">
                            <el-input
                                type="password"
                                v-model="ruleForm.checkPass"
                                autocomplete="off"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="审核进度" name="second">
                    <el-form
                        :model="query"
                        status-icon
                        :rules="rules"
                        ref="query"
                        label-width="100px"
                        class="demo-ruleForm"
                    >
                        <el-form-item label="账号" prop="user">
                            <el-input v-model.number="query.user"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model.number="query.password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="progress">查询进度</el-button>
                        </el-form-item>
                        <el-form-item
                            v-for="(domain) in dynamicValidateForm.domains"
                            :label="'申请进度'"
                            :key="domain.key"
                        >
                            <el-steps
                                :space="200"
                                :active="state"
                                :finish-status="state<='3'?'success':(state=='4'?'error':'')"
                            >
                                <el-step title="已申请"></el-step>
                                <el-step title="审核中"></el-step>
                                <el-step :title="audit"></el-step>
                            </el-steps>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import Qs from 'qs';
export default {
    data() {
        var check = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('内容不能为空'));
            }
            setTimeout(() => {
                if (!/^[0-9]*$/g.test(value)) {
                    callback(new Error('请输入数字'));
                } else {
                    callback();
                }
            }, 500);
        };
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('账号不能为空'));
            }
            setTimeout(() => {
                if (!/^[0-9a-zA-Z]*$/g.test(value)) {
                    callback(new Error('请输入数字或字母'));
                } else {
                    // console.log(value.toString().length);
                    if (value.toString().length <= 11 && value.toString().length >= 5) {
                        callback();
                    } else {
                        callback(new Error('请输入5~11位数'));
                    }
                }
            }, 1000);
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            }
            setTimeout(() => {
                if (value.toString().length <= 18 && value.toString().length >= 6) {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                } else {
                    callback(new Error('请输入6~18位数'));
                }
            }, 1000);
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            // 动态添加
            audit: '审核通过',
            //值
            ruleForm: {
                title: '', //机构名称
                pname: '', //联系人姓名
                phone: '', //联系人电话
                website: '', //机构网站
                itype: '', //行业类型
                item: '', //经营项目
                fund: '', //注册资金
                age: '', //账号
                pass: '', //密码
                checkPass: '' //确认密码
            },
            query: {
                user: '', //账号
                password: '' //密码
            },
            activeName: 'second',
            dynamicValidateForm: {
                domains: []
            },
            state: 1,
            //表单验证规则
            rules: {
                fund: [{ validator: check, trigger: 'blur' }],
                phone: [{ validator: check, trigger: 'blur' }],
                pass: [{ validator: validatePass, trigger: 'blur' }],
                checkPass: [{ validator: validatePass2, trigger: 'blur' }],
                age: [{ validator: checkAge, trigger: 'blur' }],
                password: [{ validator: validatePass, trigger: 'blur' }]
            }
        };
    },

    methods: {
        //切换页
        handleClick(tab, event) {
            /*  console.log(tab, event); */
        },
        //提交
        submitForm(ruleForm) {
            this.$http
                .post(
                    '/api/api/user/instreg',
                    Qs.stringify({
                        isuser: this.ruleForm.age, // 机构账号
                        ispass1: this.ruleForm.pass, //机构密码1
                        ispass2: this.ruleForm.checkPass, //机构密码2
                        isname: this.ruleForm.title, //要 机构名称
                        ispname: this.ruleForm.pname, //要 联系人姓名
                        isphone: this.ruleForm.phone, //要 联系人电话
                        iswebsite: this.ruleForm.website, //要 机构网站
                        isitype: this.ruleForm.itype, //要 行业类型
                        isitem: this.ruleForm.item, //要 经营项目
                        isfund: this.ruleForm.fund //要 注册资金
                    }),
                    { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
                )
                .then(obtain => {
                    if (obtain.body.code == 200) {
                        this.$message.success(obtain.body.msg);
                        this.$refs[ruleForm].resetFields();
                    } else {
                        this.$message.warning(obtain.body.msg);
                    }
                })
                .catch(fail => {
                    this.$message.error({
                        message: '服务器请求失败...'
                    });
                });
        },
        //重置
        resetForm(ruleForm) {
            this.$refs[ruleForm].resetFields();
        },
        //查询机构
        progress() {
            this.$http
                .post(
                    '/api/api/user/instget',
                    Qs.stringify({
                        isuser: this.query.user, // 机构账号
                        ispass: this.query.password //机构密码
                    }),
                    { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
                )
                .then(obtain => {
                    if (obtain.body.code == 200) {
                        this.$message.success(obtain.body.msg);
                        //this.$refs[query].resetFields();
                        if (obtain.body.data.state == '2') {
                            this.audit = '审核驳回';
                        } else {
                            this.audit = '审核通过';
                        }
                        this.state = obtain.body.data.state - 0 + 2;

                        this.dynamicValidateForm.domains = {
                            key: Date.now()
                        };
                    } else {
                        this.$message.warning(obtain.body.msg);
                    }
                })
                .catch(fail => {
                    this.$message.error({
                        message: '服务器请求失败...'
                    });
                });

            // this.value = this.form.name;
            // this.codejs(this.value);
        }
    }
};
</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/login-bg.jpg);
    background-size: 100%;
}
.ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    border-bottom: 1px solid #ddd;
}
.ms-login {
    position: absolute;
    left: 35%;
    top: 10%;
    width: 500px;
    padding: 0 60px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.5);
    overflow: hidden;
}
.ms-content {
    padding: 30px 30px;
}
.login-btn {
    text-align: center;
}
.login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
}
.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
}
</style>